<meta charset="UTF-8">
<style>
th{
	text-align:center
}
td{
	text-align:center
}
</style>
<div class="content-wrapper" style="min-height: 901px;">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1 style="text-align:center">
        	餐别管理
      </h1>
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="row">
        <div class="col-md-12">
          <div class="box">
          <div class="box-header">
          	<button class="btn btn-primary pull-left" data-toggle="modal" data-target="#newPeriod"><i class="fa fa-plus"></i>&nbsp;&nbsp;新增餐别</button>
          	
          	<button class="btn pull-right" ng-click="download('tb_periodout','餐别表格')"><i class="fa fa-cloud-download"></i>&nbsp;&nbsp;导出</button>
          </div>
            <div class="box-body table-responsive no-padding">
              <table class="table table-hover" >
                <tbody>
                <tr>
                  <th>名称</th>
                  <th>就餐时间</th>
                  <th>餐前开始预订(小时)</th>
                  <th>餐前结束预定(小时)</th>
                  <th>退菜提前结束(小时)</th>
               <!--   <th>菜谱模板<th>-->
               <!--	  <th>是否启用</th>-->
                </tr>
                <tr>
                	<td colspan="6" ng-if="dataPL == '0'">暂无数据</td>   
                </tr>
                <tr ng-repeat="p in items | orderBy:'start_time'">
                  <td>{{p.name}}</td>
                  <td>{{p.start_time}}-{{p.end_time}}</td>
                  <td>{{p.book_start_time}}</td>
                  <td>{{p.book_end_time}}</td>
                  <td>{{p.refund_end_time}}</td>
                 <!-- <td>{{p.template}}</td>-->
                 <!-- <td ng-bind="p.status=true?'开启':'停用'"></td>-->
                  <!--<td>
                  	<input class='tgl tgl-flat' id='{{p.name}}' type='checkbox' ng-model="p.status" ng-click="togglePeriod(p.id,p.status)">
    				<label class='tgl-btn' for='{{p.name}}'></label>
                  </td>-->
                  <td>
                  	<a href="" class="btn btn-lg edit" style="padding:0px" title="修改查看更多" ng-click="editPeriod(p.id)"><i class="fa fa-edit"></i></a>
                  	<a href="" class="btn btn-lg del" style="padding:0px" title="删除" ng-click="showperiod_del(p.id)"><i class="fa fa-close"></i></a>
                  </td>
                </tr>
               </tbody>
			</table>
			<table class="table table-hover" id="tb_periodout" style='z-index:-100 ;position: fixed;'>
                <tbody>
                <tr>
                  <td>名称</td>
                  <td>就餐时间</td>
                  <td>餐前开始预订(小时)</td>
                  <td>餐前结束预定(小时)</td>
                  <td>退菜提前结束(小时)</td>
                  <td>菜谱模板<td>
                  <td>状态</td>
                </tr>
                <tr ng-repeat="p in periods">
                  <td>{{p.name}}</td>
                  <td>{{p.start_time}}-{{p.end_time}}</td>
                  <td>{{p.book_start_time}}</td>
                  <td>{{p.book_end_time}}</td>
                  <td>{{p.refund_end_time}}</td>
                  <td>{{p.template}}</td>
                  <td ng-show="p.status">开启</td>
                  <td ng-show="!p.status">关闭</td>
                  <td>
                  	<input class='tgl tgl-flat' id='{{p.name}}' type='checkbox' ng-model="p.status" ng-click="togglePeriod(p.id,p.status)">
    				<label class='tgl-btn' for='{{p.name}}'></label>
                  </td>
                  <td>
                  	<a href="" class="btn btn-lg edit" style="padding:0px" title="修改" ng-click="editPeriod(p.id)"><i class="fa fa-edit"></i></a>
                  	<a href="" class="btn btn-lg del" style="padding:0px" title="删除" ng-click="showperiod_del(p.id)"><i class="fa fa-close"></i></a>
                  </td>
                </tr>
               </tbody>
			</table>
            </div>
            <!-- /.box-body -->
           <div class="box-footer" style="margin-bottom:10px;">
	              	
	              		<div class="dataTables_info col-sm-2" id="example1_info" role="status" aria-live="polite">总条目数：{{totalNums}}</div>
	              	
	               
	                	
	                		<!--<label class="col-md-2" style="font-weight:normal;float:left;padding-right:15px;">每页显示数目 
	                			
	                		</label>-->
	                		<!--<div class="col-md-2">
	                			
	                		
	                		<select name="example1_length" aria-controls="example1" class="form-control input-sm" ng-change="change(initial)" ng-model="initial" > 
	                				<option value="10">10</option> 
	                				<option value="25">25</option>
	                				<option value="50">50</option>
	                				<option value="100">100</option>
	                		    </select>
	                		</div>-->
	                		<div class="col-md-6 col-md-offset-4">
	                			<ul class="pagination pull-right" style="margin: 0px;cursor: pointer;">
		                			<li class="paginate_button previous" id="example1_previous">
		                				<a  ng-click="Previous()">上一页</a>
		                			</li>
		                			<li   ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}"><!-- class=" paginate_button active" -->
		                				<a  ng-click="selectPage(page)">{{page}}</a>
		                			</li>
		                			<li class="paginate_button next" id="example1_next">
		                				<a  ng-click="Next()">下一页</a>
		                			</li>
	                		</ul>
	                		</div>
	                		
	                	
	                
	              </div>
          </div>
          <!-- /.box -->
        </div>
      </div>
    </section>
    <!-- /.content -->
  </div>
<!-- 餐别修改  -->
  <div class="modal fade" id="detail_Periods" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
 <div class="modal-dialog" role="document">
 	<form>
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" style="text-align:center">餐别修改</h4>
      </div>
      <div class="modal-body form-horizontal">
        <div class="box-body">
            <div class="form-group">
               <label class="col-sm-3 control-label">餐别名称</label>
               <div class="col-sm-9">
                  <input type="text" class="form-control" placeholder="餐别名称" ng-model="period.name" ng-required='true'>
               </div>
            </div>
 			<div class="form-group">
               <label class="col-sm-3 control-label">就餐时间</label>
               <div class="col-sm-4">
                  <!--<input type="text" class="form-control" ng-model="newPeriod.book_start_time">-->
            <div class="bootstrap-timepicker">
			<div class="bootstrap-timepicker-widget dropdown-menu">
				<table><tbody><tr><td><a href="#" data-action="incrementHour"><i class="glyphicon glyphicon-chevron-up"></i></a></td><td class="separator">&nbsp;</td><td><a href="#" data-action="incrementMinute"><i class="glyphicon glyphicon-chevron-up"></i></a></td><td class="separator">&nbsp;</td><td class="meridian-column"><a href="#" data-action="toggleMeridian"><i class="glyphicon glyphicon-chevron-up"></i></a></td></tr><tr><td><span class="bootstrap-timepicker-hour">03</span></td> <td class="separator">:</td><td><span class="bootstrap-timepicker-minute">15</span></td> <td class="separator">&nbsp;</td><td><span class="bootstrap-timepicker-meridian">PM</span></td></tr><tr><td><a href="#" data-action="decrementHour"><i class="glyphicon glyphicon-chevron-down"></i></a></td><td class="separator"></td><td><a href="#" data-action="decrementMinute"><i class="glyphicon glyphicon-chevron-down"></i></a></td><td class="separator">&nbsp;</td><td><a href="#" data-action="toggleMeridian"><i class="glyphicon glyphicon-chevron-down"></i></a></td></tr></tbody></table></div>
                <div class="form-group">
                  <div class="input-group" style="padding-left: 15px;">
                    <input type="text" class="form-control timepicker col-sm-4" ng-model="period.start_time" ng-required='true' readonly="readonly">

                 </div>
                  <!-- /.input group -->
                </div>
                <!-- /.form group -->
              </div>
               </div>
               <label class="col-sm-1 control-label">至</label>
               
                  <!--<input type="text" class="form-control" ng-model="newPeriod.book_end_time">-->
                  	 <div class="col-sm-4">
                  	<div class="bootstrap-timepicker">
			<div class="bootstrap-timepicker-widget dropdown-menu">
				<table><tbody><tr><td><a href="#" data-action="incrementHour"><i class="glyphicon glyphicon-chevron-up"></i></a></td><td class="separator">&nbsp;</td><td><a href="#" data-action="incrementMinute"><i class="glyphicon glyphicon-chevron-up"></i></a></td><td class="separator">&nbsp;</td><td class="meridian-column"><a href="#" data-action="toggleMeridian"><i class="glyphicon glyphicon-chevron-up"></i></a></td></tr><tr><td><span class="bootstrap-timepicker-hour">03</span></td> <td class="separator">:</td><td><span class="bootstrap-timepicker-minute">15</span></td> <td class="separator">&nbsp;</td><td><span class="bootstrap-timepicker-meridian">PM</span></td></tr><tr><td><a href="#" data-action="decrementHour"><i class="glyphicon glyphicon-chevron-down"></i></a></td><td class="separator"></td><td><a href="#" data-action="decrementMinute"><i class="glyphicon glyphicon-chevron-down"></i></a></td><td class="separator">&nbsp;</td><td><a href="#" data-action="toggleMeridian"><i class="glyphicon glyphicon-chevron-down"></i></a></td></tr></tbody></table></div>
                <div class="form-group">
                  <div class="input-group" style="padding-left: 20px;">
                    <input type="text" class="form-control timepicker col-sm-4" ng-model="period.end_time" ng-required='true' readonly="readonly">

                 </div>
                  <!-- /.input group -->
                </div>
                <!-- /.form group -->
              </div>
              </div>
               <label style="color: #ff3d00; display: inline-block;padding-left: 160px;">一天的时间范围为00:00-23:59</label>
            </div>
            <div class="form-group">
               <label class="col-sm-4 control-label">餐前开始预订(小时)</label>
               <div class="col-sm-2">
                  <input type="text" class="form-control" ng-model="period.book_start_time" ng-required='true'>
               </div>
               <label class="col-sm-4 control-label">餐前结束预订(小时)</label>
               <div class="col-sm-2">
                  <input type="text" class="form-control" ng-model="period.book_end_time" ng-required='true'>
               </div>
            </div>
            <div class="form-group">
               <label class="col-sm-4 control-label">退菜提前结束(小时)</label>
               <div class="col-sm-8">
                  <input type="text" class="form-control" ng-model="period.refund_end_time" ng-required='true'>
               </div>
            </div>
            <!--<div class="form-group">
               <label class="col-sm-4 control-label">菜谱模板</label>
               <div class="col-sm-8">
                  <select class="form-control" ng-model="period.template" ng-required='true'>
                  	<option ng-repeat="temp in menuTemp" value="{{temp.id}}">{{temp.name}}</option>
                  </select>
               </div>
            </div>-->
            <div class="form-group">
               <label for="edit_is_multiple" class="col-sm-3 control-label">是否允许多次消费</label>
                 <div class="col-sm-9">
                    <input class='tgl tgl-flat' id='edit_is_multiple' type='checkbox' ng-model="period.is_multiple">
    				<label class='tgl-btn' for='edit_is_multiple'></label>
                </div>
            </div>
            <div class="form-group">
               <label for="edit_is_pay_by_time" class="col-sm-3 control-label">是否按次消费</label>
                 <div class="col-sm-9">
                    <input class='tgl tgl-flat' id='edit_is_pay_by_time' type='checkbox' ng-model="period.is_pay_by_time">
    				<label class='tgl-btn' for='edit_is_pay_by_time'></label>
                </div>
            </div>
            <!--<div class="form-group">
               <label class="col-sm-3 control-label">状态</label>
               <div class="col-sm-9">
                    <input class='tgl tgl-flat' id='status' type='checkbox' ng-true-value="0" ng-false-value="1" ng-model="period.status">
    				<label class='tgl-btn' for='status'></label>
               </div>
            </div>-->
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default btn-lg pull-left" data-dismiss="modal">取消</button>
        <button type="submit" class="btn btn-success btn-lg" ng-click="savePeriod();">保存</button>
      </div>
    </div>
    </form>
  </div>
</div>
<!-- 添加餐别模态框 -->
<div class="modal fade" id="newPeriod" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
  	<form>
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" style="text-align:center">新增餐别</h4>
      </div>
      <div class="modal-body form-horizontal">
        <div class="box-body">
            <div class="form-group">
               <label class="col-sm-3 control-label">餐别名称</label>
               <div class="col-sm-9">
                  <input type="text" class="form-control" placeholder="餐别名称" ng-model="newPeriod.name" ng-required='true'>
               </div>
            </div>
           <div class="form-group">
               <label class="col-sm-3 control-label">就餐时间</label>
               <div class="col-sm-4">
                  <!--<input type="text" class="form-control" ng-model="newPeriod.book_start_time">-->
            <div class="bootstrap-timepicker">
			<div class="bootstrap-timepicker-widget dropdown-menu">
				<table><tbody><tr><td><a href="#" data-action="incrementHour"><i class="glyphicon glyphicon-chevron-up"></i></a></td><td class="separator">&nbsp;</td><td><a href="#" data-action="incrementMinute"><i class="glyphicon glyphicon-chevron-up"></i></a></td><td class="separator">&nbsp;</td><td class="meridian-column"><a href="#" data-action="toggleMeridian"><i class="glyphicon glyphicon-chevron-up"></i></a></td></tr><tr><td><span class="bootstrap-timepicker-hour">03</span></td> <td class="separator">:</td><td><span class="bootstrap-timepicker-minute">15</span></td> <td class="separator">&nbsp;</td><td><span class="bootstrap-timepicker-meridian">PM</span></td></tr><tr><td><a href="#" data-action="decrementHour"><i class="glyphicon glyphicon-chevron-down"></i></a></td><td class="separator"></td><td><a href="#" data-action="decrementMinute"><i class="glyphicon glyphicon-chevron-down"></i></a></td><td class="separator">&nbsp;</td><td><a href="#" data-action="toggleMeridian"><i class="glyphicon glyphicon-chevron-down"></i></a></td></tr></tbody></table></div>
                <div class="form-group">
                  <div class="input-group" style="padding-left: 15px;">
                    <input type="text" class="form-control timepicker col-sm-4" ng-model="newPeriod.start_time" ng-required='true' readonly="readonly">

                 </div>
                  <!-- /.input group -->
                </div>
                <!-- /.form group -->
              </div>
               </div>
               <label class="col-sm-1 control-label">至</label>
               
                  <!--<input type="text" class="form-control" ng-model="newPeriod.book_end_time">-->
                  	 <div class="col-sm-4">
                  	<div class="bootstrap-timepicker">
			<div class="bootstrap-timepicker-widget dropdown-menu">
				<table><tbody><tr><td><a href="#" data-action="incrementHour"><i class="glyphicon glyphicon-chevron-up"></i></a></td><td class="separator">&nbsp;</td><td><a href="#" data-action="incrementMinute"><i class="glyphicon glyphicon-chevron-up"></i></a></td><td class="separator">&nbsp;</td><td class="meridian-column"><a href="#" data-action="toggleMeridian"><i class="glyphicon glyphicon-chevron-up"></i></a></td></tr><tr><td><span class="bootstrap-timepicker-hour">03</span></td> <td class="separator">:</td><td><span class="bootstrap-timepicker-minute">15</span></td> <td class="separator">&nbsp;</td><td><span class="bootstrap-timepicker-meridian">PM</span></td></tr><tr><td><a href="#" data-action="decrementHour"><i class="glyphicon glyphicon-chevron-down"></i></a></td><td class="separator"></td><td><a href="#" data-action="decrementMinute"><i class="glyphicon glyphicon-chevron-down"></i></a></td><td class="separator">&nbsp;</td><td><a href="#" data-action="toggleMeridian"><i class="glyphicon glyphicon-chevron-down"></i></a></td></tr></tbody></table></div>
                <div class="form-group">
                  <div class="input-group" style="padding-left: 20px;">
                    <input type="text" class="form-control timepicker col-sm-4" ng-model="newPeriod.end_time" ng-required='true' readonly="readonly">

                 </div>
                  <!-- /.input group -->
                </div>
                <!-- /.form group -->
              </div>
              </div>
              <label style="color: #ff3d00; display: inline-block;padding-left: 160px;">一天的时间范围为00:00-23:59</label>
            </div>
            <div class="form-group">
               <label class="col-sm-4 control-label">餐前开始预订(小时)</label>
               <div class="col-sm-2">
                  <input type="text" class="form-control" ng-model="newPeriod.book_start_time" ng-required='true'>
               </div>
               <label class="col-sm-4 control-label">餐前结束预订(小时)</label>
               <div class="col-sm-2">
                  <input type="text" class="form-control" ng-model="newPeriod.book_end_time" ng-required='true'>
               </div>
            </div>
            <div class="form-group">
               <label class="col-sm-4 control-label">退菜提前结束(小时)</label>
               <div class="col-sm-8">
                  <input type="text" class="form-control" ng-model="newPeriod.refund_end_time" ng-required='true'> 
               </div>
            </div>
            <!--<div class="form-group">
               <label class="col-sm-4 control-label">菜谱模板</label>
               <div class="col-sm-8">
                  <select class="form-control" ng-model="newPeriod.template" ng-required='true'>
                  	<option ng-repeat="temp in menuTemp" value="{{temp.id}}">{{temp.name}}</option>
                  </select>
               </div>
            </div>-->
            <div class="form-group">
               <label for="new_is_multiple" class="col-sm-4 control-label">是否允许多次消费</label>
                 <div class="col-sm-8">
                    <input class='tgl tgl-flat' id='new_is_multiple' type='checkbox' ng-model="newPeriod.is_multiple">
    				<label class='tgl-btn' for='new_is_multiple'></label>
                </div>
            </div>
            <div class="form-group">
               <label for="new_is_pay_by_time" class="col-sm-4 control-label">是否按次消费</label>
                 <div class="col-sm-8">
                    <input class='tgl tgl-flat' id='new_is_pay_by_time' type='checkbox' ng-model="newPeriod.is_pay_by_time">
    				<label class='tgl-btn' for='new_is_pay_by_time'></label>
                </div>
            </div>
            <!--<div class="form-group">
               <label class="col-sm-4 control-label">是否启用</label>
               <div class="col-sm-8">
                    <input class='tgl tgl-flat' id='status' type='checkbox' ng-true-value="0" ng-false-value="1" ng-model="newPeriod.status">
    				<label class='tgl-btn' for='status'></label>
               </div>
            </div>-->
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default btn-lg pull-left" data-dismiss="modal">取消</button>
        <button type="submit" class="btn btn-success btn-lg" ng-click="saveNewPeriod();">保存</button>
      </div>
    </div>
    </form>
  </div>
</div>
<!-- 时间验证提示 -->
  <div class="modal fade" id="warningTime" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" style="text-align:center">提示</h4>
      </div>
      <div class="modal-body form-horizontal">
        <div class="box-body">
           	<h3 style="text-align:center">开始时间不能大于或等于结束时间！请重新填写！</h3>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default btn-lg col-md-4 col-md-offset-4" data-dismiss="modal">确定</button>
      </div>
    </div>
  </div>
</div>
<!-- 删除餐别  -->
  <div class="modal fade" id="delPeriods" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" style="text-align:center">提示</h4>
      </div>
      <div class="modal-body form-horizontal">
        <div class="box-body">
           	确定要删除所选餐别 吗？
        </div>
        <input class="hidden" id="periodId"/>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default btn-lg pull-left" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-success btn-lg" ng-click="del_periods();">确定</button>
      </div>
    </div>
  </div>
</div>
<!-- 停用餐别 -->
  <div class="modal fade" id="stopTime" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" style="text-align:center">提示</h4>
      </div>
      <div class="modal-body form-horizontal">
        <div class="box-body">
           	<h3 style="text-align:center">确定要停用餐别吗？</h3>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default pull-left btn-lg" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary pull-right btn-lg" ng-click="sureStop()">确定</button>
      </div>
    </div>
  </div>
</div>
<!-- 启用餐别 -->
  <div class="modal fade" id="openTime" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" style="text-align:center">提示</h4>
      </div>
      <div class="modal-body form-horizontal">
        <div class="box-body">
           	<h3 style="text-align:center">确定要启用餐别吗？</h3>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default btn-lg pull-left" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary btn-lg pull-right" ng-click="sureOpen()">确定</button>
      </div>
    </div>
  </div>
</div>
<script>
	$(".timepicker").timepicker({
		showInputs: false,
		showMeridian:false
	});
</script>
